import path from "path";
const __dirname = path.resolve();

// 引入编译html的插件
import HtmlWebpackPlugin from 'html-webpack-plugin';


// 引入抽离css文件的插件
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

const options = {

    stats: {

        chunks: true,

        ids: true,

        hash: true,

    },

    optimization: {

        chunkIds: "natural",

    },

    // 模式

    // development 开发模式 production 生产模式

    mode: "production",

    // 入口模块的声明

    entry: {

        index: "./src/index.js",

        utils: "./src/utils.js",

    },

    // 输出目录

    output: {

        // ./dist

        path: path.resolve(__dirname, "dist"),

        // 输出 index.js 和 utils.js

        filename: "./js/[name].bundle-[fullhash].js",

        // 每次编译的时候把上一次的内容给清空

        clean: true,

    },

    // loader - 可以让webpack解析非js的其他模块

    module: {

        // 解析规则

        rules: [

            {

                test: /.css$/,

                use: [

                    MiniCssExtractPlugin.loader,

                    "css-loader", // css-loader 负责解析 CSS 代码, 处理 CSS 中的依赖

                ],

            },

            {

                test: /\.js$/,

                // 排除项 - 也是正则

                exclude: /node_modules/,

                // 使用的loader - 如果是配置项，则写成对象

                use: {

                    // 指定loader

                    loader: "babel-loader",

                    // 更好的在其他的浏览器兼容es6高级语法

                    options: {

                        // 预设方案和细节声明 - 二维数组

                        presets: [

                            [

                                "@babel/preset-env",

                                {

                                    // 只打包使用的ES6新API的实现代码

                                    useBuiltIns: "usage",

                                    // 指定core-js的版本号为2

                                    corejs: { version: 2 },

                                },

                            ],

                        ],

                    },

                },

            },

        ],

    },

    plugins: [

        // 编译html的插件

        new HtmlWebpackPlugin({

            // 指定模板存放的路径

            template: "./src/index.html",

            // 在body中注入编译好的文件

            inject: "body",

            // 每一次编译的bundle.js 带一些哈希，防止缓存

            hash: true,

            // 关于html的压缩处理

            minify: {

                // 移除属性中的双引号

                removeAttributeQuotes: true,

                // 移除注释

                removeComments: true,

                // 去除换行和空格

                collapseWhitespace: true,

            },

        }),

        // 用 MiniCssExtractPlugin 抽离出 css 文件，以 link 标签的形式引入样式文件

        new MiniCssExtractPlugin({

            filename: "index.bundle-[fullhash].css", // 输出的 css 文件名为 index.css

        }),

    ],

};

export default options;